<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>主题化 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="theming Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="theming Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
      
      
      
      
    </ul>
  </div>
 
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      

      <nav class="collapse bd-links" id="bd-docs-nav">
        <div class="bd-toc-item active"> <a class="bd-toc-link" href="index.html">快速入门</a>
          <ul class="nav bd-sidenav">
            <li><a href="index.html">关于</a></li>
            <li><a href="download.html">下载</a></li>
            <li><a href="contents.html">目录结构</a></li>
            <li><a href="browsers-devices.html">浏览器与设备调优</a></li>
            <li><a href="javascript.html">JavaScript脚本</a></li>
            <li class="active bd-sidenav-active"><a href="theming.html">主题化</a></li>
            <li><a href="build-tools.html">编译工具</a></li>
            <li><a href="webpack.html"> Webpack模块化</a></li>
            <li><a href="accessibility.html">无障碍浏览</a></li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../layout/overview.html">布局</a>
          <ul class="nav bd-sidenav">
            <li><a href="../layout/overview.html">概览</a></li>
            <li><a href="../layout/grid.html">栅格</a></li>
            <li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../content/reboot.html">内容 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../content/reboot.html"> 初始化与CSS重置 </a> </li>
            <li> <a href="../content/typography.html"> 排版 </a> </li>
            <li> <a href="../content/code.html"> 代码 </a> </li>
            <li> <a href="../content/images.html"> 图片 </a> </li>
            <li> <a href="../content/tables.html"> 表格 </a> </li>
            <li> <a href="../content/figures.html"> 图文框 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../components/alerts.html"> 组件 </a>
          <ul class="nav bd-sidenav">
    <li><a href="../components/alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="../components/badge.html"> 徽章(Badge) </a> </li>
    <li><a href="../components/breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="../components/buttons.html"> 按钮(Button) </a> </li>
    <li><a href="../components/button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="../components/card.html"> 卡片(Card) </a> </li>
    <li><a href="../components/carousel.html">  轮播效果(Carousell) </a> </li>
    <li><a href="../components/collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="../components/dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="../components/forms.html"> 表单(Form) </a> </li>
    <li><a href="../components/input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="../components/jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="../components/list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="../components/media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="../components/modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="../components/navs.html"> 导航/滑动门(Nav) </a> </li>
    <li><a href="../components/navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="../components/pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="../components/popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="../components/progress.html"> 进度条(Progress) </a> </li>
    <li><a href="../components/scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="../components/spinners.html"> 旋转特效(Spinners) </a> </li>
    <li><a href="../components/toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li><a href="../components/tooltips.html"> 提示冒泡(Tooltip) </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../utilities/borders.html"> 边框(border) </a> </li>
            <li> <a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
            <li> <a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
            <li> <a href="../utilities/colors.html"> 颜色(color) </a> </li>
            <li> <a href="../utilities/display.html"> Display显示属性 </a> </li>
            <li> <a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
            <li> <a href="../utilities/flex.html"> Flex弹性布局 </a> </li>
            <li> <a href="../utilities/float.html"> Float浮动属性 </a> </li>
            <li> <a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
			<li><a href="../utilities/overflow.html"> 溢出 </a> </li>
            <li> <a href="../utilities/position.html"> 固顶(底）及定位 </a> </li>
            <li> <a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders) </a> </li>
			<li><a href="../utilities/shadows.html"> 阴影(shadows) </a> </li>
            <li> <a href="../utilities/sizing.html"> 规格(sizi) </a> </li>
            <li> <a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
            <li> <a href="../utilities/text.html"> 文本处理 </a> </li>
            <li> <a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
            <li> <a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../extend/approach.html"> 延伸 </a>
          <ul class="nav bd-sidenav">
            <li><a href="../extend/approach.html"> 方法论 </a> </li>
            <li> <a href="../extend/icons.html"> 图标 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../migration/index.html"> 迁移 </a>
          <ul class="nav bd-sidenav">
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../about/history.html"> 关于 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../about/history.html"> 成长历史 </a> </li>
            <li> <a href="../about/team.html"> 项目团队 </a> </li>
            <li> <a href="../about/brand.html"> 品牌标志 </a> </li>
            <li> <a href="../about/license.html"> 许可授权 </a> </li>
            <li> <a href="../about/translations.html"> 翻译 </a> </li>
          </ul>
        </div>
      </nav>

    </div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
  <ul class="section-nav">
    <li class="toc-entry toc-h2"><a href="#introduction">简介</a></li>
    <li class="toc-entry toc-h2"><a href="#sass">Sass定义</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#file-structure">文件结构</a></li>
		<li class="toc-entry toc-h3"><a href="#importing">输入</a></li>
        <li class="toc-entry toc-h3"><a href="#variable-defaults">变量缺省值</a></li>
        <li class="toc-entry toc-h3"><a href="#maps-and-loops">Map定义与loops循环定义</a>
		<ul>
<li class="toc-entry toc-h4"><a href="#modify-map">修改map</a></li>
<li class="toc-entry toc-h4"><a href="#add-to-map">添加map</a></li>
<li class="toc-entry toc-h4"><a href="#remove-from-map">移除map</a></li>
<li class="toc-entry toc-h4"><a href="#required-keys">必需的键值</a></li>
</ul>
		
		</li>
        <li class="toc-entry toc-h3"><a href="#functions">函数</a></li>
        <li class="toc-entry toc-h3"><a href="#color-contrast">色彩对比</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#escape-svg">SVG转义规范</a></li>
    <li class="toc-entry toc-h2"><a href="#add-and-subtract-functions">加减函数</a></li>
    <li class="toc-entry toc-h2"><a href="#sass-options">Sass选项</a></li>
    <li class="toc-entry toc-h2"><a href="#color">颜色</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#all-colors">颜色盘</a></li>
        <li class="toc-entry toc-h3"><a href="#theme-colors">主题颜色</a></li>
        <li class="toc-entry toc-h3"><a href="#grays">灰度</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#components">组件</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#modifiers">修饰符</a></li>
        <li class="toc-entry toc-h3"><a href="#responsive">响应</a></li>
      </ul>	
    </li>
	<li class="toc-entry toc-h2"><a href="#css-variables"> CSS变量</a> 		
	<ul>
	<li class="toc-entry toc-h3"><a href="#available-variables">可用变量</a></li>
	<li class="toc-entry toc-h3"><a href="#examples">实例</a></li>
	<li class="toc-entry toc-h3"><a href="#breakpoint-variables">断点变量</a></li>
	</ul>
	</li>
  </ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
  <h1 class="bd-title" id="content">主题化 Bootstrap</h1>
  <p class="bd-lead">使用我们新的内置Sass变量自定义Bootstrap 4，用于全局风格偏好，方便的进行主题和组件属性定义。</p>
   
  <h2 id="introduction">简介</h2>
  <p>在Bootstrap 3中，主题主要由LESS决定，自定义CSS中的可能会覆盖项目<code class="highlighter-rouge">dist</code>文件中默认的内置的主题样式表，用户通过自定义各种颜色属性，可以完全重新设计Bootstrap 3的外观，而无需触摸核心文件。</p>
  <p>青出于蓝胜于蓝，Bootstrap 4继承了上一个版本的方便易用思路，新的主题化习惯与旧版沿袭相同，却更加方便。</p>
  <p>现在，主题由Sass变量，Sass maps和自定义CSS完成，虽然没有专门的主题样式表， 却可以启用内置主题来添加渐变，阴影等。  </p>
  <h2 id="sass">Sass定义</h2>
  <p>利用系统提供的Sass源文件、maps文件、变量、混合等。</p>
  <h3 id="file-structure">文件结构</h3>
  <p>尽可能避免修改Bootstrap的核心文件。对于Sass，这意味着创建您自己的样式表导入Bootstrap，以便您可以修改和扩展它。假设您已经下载了源文件或正在使用软件包管理器，那么文件结构如下所示：</p>
  <figure class="highlight">
    <pre><code class="language-plaintext" data-lang="plaintext">your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss</code></pre>
  </figure>
  <p>如果您已经下载了我们的源文件而没有使用包管理器，那么您需要手动设置类似于该结构的东西，将Bootstrap的源文件与您自己的文件分开.</p>
  <div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div>
  <figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss</code></pre></figure>
  <p>
  <h3 id="importing"><span class="bd-content-title">输入</span></h3>

   在<code class="highlighter-rouge">custom.scss</code>中，您将导入Bootstrap的源Sass文件。 您有两个选择：包括所有Bootstrap，或选择您需要的部件。 我们鼓励后者，但要注意我们的组件有一些要求和依赖。 您还需要为我们的插件添加一些JavaScript。</p>
 <div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div>
 <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
<span class="c1">// Option A: Include all of Bootstrap</span>

<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
<span class="c1">// Option A: Include all of Bootstrap</span>

<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></pre></figure>
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
<span class="c1">// Option B: Include parts of Bootstrap</span>

<span class="c1">// Required</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/mixins"</span><span class="p">;</span>

<span class="c1">// Optional</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/type"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/images"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/code"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/grid"</span><span class="p">;</span></code></pre></figure>

<p>使用该设置，您可以开始修改任何Sass变量和映射<code class="highlighter-rouge">custom.scss</code>。您还可以根据<code class="highlighter-rouge">//Optional</code>需要开始在该部分下添加Bootstrap的部分。我们建议使用<code class="highlighter-rouge">bootstrap.scss</code>文件中的完整导入堆栈作为起点。</p>
  <h3 id="variable-defaults">变量缺省值</h3>
  <p>Bootstrap 4中的每个Sass变量都包含<code class="highlighter-rouge">!default</code>标签，这是允许您在自己的Sass中覆盖变量的默认值，而无需修改Bootstrap的源代码。根据需要复制和粘贴变量，修改其值，并删除<code class="highlighter-rouge">!default</code>标志。如果已经分配了一个变量，那么它将不会被Bootstrap中的默认值重新分配。</p>
<p>相同Sass文件中的变量覆盖可以在默认变量之前或之后。但是，当覆盖Sass文件时，您的覆盖必须在导入Bootstrap的Sass文件之前。</p>
<p>下面的例子,改变<code class="highlighter-rouge">&lt;body&gt;</code>中的<code class="highlighter-rouge">background-color</code>与<code class="highlighter-rouge">color</code>属性，并通过Nodejs NPM方法引导编译：</p>

  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="c1">// Your variable overrides </span><span class="nv">$body-bg</span><span class="p">:</span> <span class="mh">#000</span><span class="p">;</span>
<span class="nv">$body-color</span><span class="p">:</span> <span class="mh">#111</span><span class="p">;</span>

<span class="c1">// Bootstrap and its default variables
</span><span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre>
  </figure>
  <p>对Bootstrap中的任何变量进行必要的重复定义，包括下面的全局选项和子类选项。</p>
  <h3 id="maps-and-loops">Map定义与loops循环定义</h3>
  <p>Sass的第三个版本给我们带来了新的数据类型，叫做<code class="highlighter-rouge">map</code>。虽然你可以不知道这个名称，但在其他的语言中我们使用过map，通常就是关联数组。换句话说，Sass的<code class="highlighter-rouge">map</code>就是用关键名匹配对应值的一个数组(这里译者为大家提供了一个技术普及帖：<a href="http://www.z01.com/help/web/3208.shtml" target="_blank">《使用Sass Maps 的技术普及知识》http://www.z01.com/help/web/3208.shtml</a>)</p>
  <p>Bootstrap 4包括一些Sass map定义，使得更容易产生相关CSS的家庭。我们使用Sass map作为我们的颜色、网格、断点等关键了定义，这就如同Sass变量一样，所有Sass映射都包含<code class="highlighter-rouge">!default</code>标志，可以被覆盖并扩展。</p>
  <p>下面是改变了一个例子<code class="highlighter-rouge">background-color</code> ，并<code class="highlighter-rouge">color</code> 为<code class="highlighter-rouge">body</code> 进口，并通过NPM编译引导时：</p>
 
  
<figure class="highlight">
<pre><code class="language-scss" data-lang="scss"><span class="c1">// Your variable overrides</span>
<span class="nv">$body-bg</span><span class="p">:</span> <span class="mh">#000</span><span class="p">;</span>
<span class="nv">$body-color</span><span class="p">:</span> <span class="mh">#111</span><span class="p">;</span>

<span class="c1">// Bootstrap and its default variables</span>
<span class="k">@import</span> <span class="s2">"../node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>
   <h4 id="modify-map"><span class="bd-content-title">修改 map</span></h4>
<p>例如，要修改我们<code class="highlighter-rouge">$theme-colors</code> map的现有颜色，请将以下内容添加到您的自定义Sass文件中：</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
  <span class="s2">"primary"</span><span class="o">:</span> <span class="mh">#0074d9</span><span class="o">,</span>
  <span class="s2">"danger"</span><span class="o">:</span> <span class="mh">#ff4136</span>
<span class="p">);</span></code></pre>
  </figure>
  <h4 id="add-to-map"><span class="bd-content-title">添加map</span></h4>
  <p>添加一个新的颜色<code class="highlighter-rouge">$theme-colors</code>、新的键和值：</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
  <span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#900</span>

<span class="p">);</span></code></pre>
  </figure>
  <h4 id="remove-from-map"><span class="bd-content-title">移除map<a class="anchorjs-link " href="#remove-from-map" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></span></h4>
  <p>要从<code class="highlighter-rouge">$theme-colors</code>任何其他画布删除颜色，请使用map-remove：</p>
  <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Required</span>
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/mixins"</span><span class="p">;</span><font></font>
<font></font>
<span class="nv">$theme-colors</span><span class="p">:</span> <span class="nf">map-remove</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="s2">"info"</span><span class="o">,</span> <span class="s2">"light"</span><span class="o">,</span> <span class="s2">"dark"</span><span class="p">);</span><font></font>
<font></font>
<span class="c1">// Optional</span>
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/root"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/type"</span><span class="p">;</span>
<span class="nc">...</span></code></pre></figure>
  
  <h3 id="required-keys">必须的键值</h3>
  <p>Bootstrap假定在我们使用的Sass地图中存在一些特定的键，并自行扩展它们。在您定制包含的地图时，您可能会遇到使用特定Sass地图密钥的错误。</p>
  <p>例如，我们使用<code>primary</code>，<code>success</code>以及<code>danger</code>来自键 <code>$theme-colors</code> 的链接，按钮和表单的状态。替换这些键的值应该没有问题，但删除它们可能会导致Sass编译问题。在这些情况下，您需要修改使用这些值的Sass代码。</p>
  
  <h3 id="functions">函数</h3>
  <p>Bootstrap使用多个Sass函数，但只有一个子集适用于一般主题。我们已经包含三个功能来获取颜色映射的值：</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="k">@function</span> <span class="nf">color</span><span class="p">(</span><span class="nv">$key</span><span class="o">:</span> <span class="s2">"blue"</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">@return</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$colors</span><span class="o">,</span> <span class="nv">$key</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">@function</span> <span class="nf">theme-color</span><span class="p">(</span><span class="nv">$key</span><span class="o">:</span> <span class="s2">"primary"</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">@return</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="nv">$key</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">@function</span> <span class="nf">gray</span><span class="p">(</span><span class="nv">$key</span><span class="o">:</span> <span class="s2">"100"</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">@return</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$grays</span><span class="o">,</span> <span class="nv">$key</span><span class="p">);</span>
<span class="p">}</span></code></pre>
  </figure>
  <p>这些允许您从Sass map中选择一种颜色，如同在v3中的颜色变量：</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nf">gray</span><span class="p">(</span><span class="s2">"100"</span><span class="p">);</span>
  <span class="nl">background-color</span><span class="p">:</span> <span class="nf">theme-color</span><span class="p">(</span><span class="s2">"dark"</span><span class="p">);</span>
<span class="p">}</span></code></pre>
  </figure>
  <p>我们还可获得特定的函数<em>level</em>的颜色来自<code class="highlighter-rouge">$theme-colors</code> map定义，负电平值会减轻颜色，而较高的电平值会变暗，从而实现变量定义颜色。</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="k">@function</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color-name</span><span class="o">:</span> <span class="s2">"primary"</span><span class="o">,</span> <span class="nv">$level</span><span class="o">:</span> <span class="m">0</span><span class="p">)</span> <span class="p">{</span>
  <span class="nv">$color</span><span class="p">:</span> <span class="nf">theme-color</span><span class="p">(</span><span class="nv">$color-name</span><span class="p">);</span>
  <span class="nv">$color-base</span><span class="p">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$level</span> <span class="o">&gt;</span> <span class="m">0</span><span class="o">,</span> <span class="mh">#000</span><span class="o">,</span> <span class="mh">#fff</span><span class="p">);</span>
  <span class="nv">$level</span><span class="p">:</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$level</span><span class="p">);</span>

  <span class="k">@return</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$color-base</span><span class="o">,</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$level</span> <span class="o">*</span> <span class="nv">$theme-color-interval</span><span class="p">);</span>
<span class="p">}</span></code></pre>
  </figure>
  <p>
  在实践中，您可以调用该函数并传入两个参数：<code class="highlighter-rouge">$theme-colors</code> (如primary默认色 或 danger危险色) 的颜色名称和数字级别。</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="n">primary</span><span class="o">,</span> <span class="m">-10</span><span class="p">);</span>
<span class="p">}</span></code></pre>
  </figure>
  <p>未来还可以添加其他功能或您自己的自定义Sass，以创建附加Sass map的级别函数，或者如果要更详细地创建级别函数。</p>
  <h3 id="color-contrast">色彩对比</h3>
  <p>Bootstrap中包含的另外一个功能是色彩对比功能<code class="highlighter-rouge">color-yiq</code>,它基于<a href="https://en.wikipedia.org/wiki/YIQ">YIQ color space</a>指定的基色自动返回光（#fff）或暗（#111）产生颜色对比。此功能对于要生成多个类的mixins或循环特别有用。</p>
  <p>例如，从我们的<code class="highlighter-rouge">$theme-colors</code> map生成颜色样本：</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
  <span class="nc">.swatch-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
    <span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="nv">$value</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span></code></pre>
  </figure>
  <p>它也可以用于一次性对比度需求：</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="mh">#000</span><span class="p">);</span> <span class="c1">// returns `color: #fff`
</span><span class="p">}</span></code></pre>
  </figure>
  <p>您还可以使用我们的color map功能指定基色：:</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="nf">theme-color</span><span class="p">(</span><span class="s2">"dark"</span><span class="p">));</span> <span class="c1">// returns `color: #fff`
</span><span class="p">}</span></code></pre>
  </figure>
   <h2 id="escape-svg">SVG转义规范</h2>
  <p>我们使用<code class="highlighter-rouge">escape-svg</code>方法对<code class="highlighter-rouge">&lt;</code>、<code class="highlighter-rouge">&gt;</code>、<code class="highlighter-rouge">#</code>对svg进行转义，在定义背景字体的时候，因而在IE中需要转义才能正确显示,。</p>
    <h2 id="add-and-subtract-functions">加减函数</h2>
  <p>我们使用<code class="highlighter-rouge">add</code>、<code class="highlighter-rouge">subtract</code>来封装CSS，使用这些函数的目的是避免把0值传递给算式，比如<code class="highlighter-rouge">calc(10px - 0)</code> 尽管在数学中是正确的，但在所有浏览器中都会返回错误。</p>
  <p>下面是有一个合法有效的CSS公式计算示例：</p>

<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$border-radius</span><span class="p">:</span> <span class="mi">.25rem</span><span class="p">;</span>
<span class="nv">$border-width</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span>

<span class="nc">.element</span> <span class="p">{</span>
  <span class="c1">// Output calc(.25rem - 1px) is valid</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="nf">calc</span><span class="p">(</span><span class="nv">$border-radius</span> <span class="o">-</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.element</span> <span class="p">{</span>
  <span class="c1">// Output the same calc(.25rem - 1px) as above</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$border-radius</span><span class="o">,</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>

<p>下面则是一个无效的非法CSS公式计算示例（因为$border-width:0输出了一个0值-译者注）:</p>

<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$border-radius</span><span class="p">:</span> <span class="mi">.25rem</span><span class="p">;</span>
<span class="nv">$border-width</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>

<span class="nc">.element</span> <span class="p">{</span>
  <span class="c1">// Output calc(.25rem - 0) is invalid</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="nf">calc</span><span class="p">(</span><span class="nv">$border-radius</span> <span class="o">-</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span>

<span class="nc">.element</span> <span class="p">{</span>
  <span class="c1">// Output .25rem</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="nf">subtract</span><span class="p">(</span><span class="nv">$border-radius</span><span class="o">,</span> <span class="nv">$border-width</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>  
  
  
  <h2 id="sass-options">Sass选项</h2>
  <p>使用内置的自定义变量文件定制Bootstrap 4，并轻松地使用新的 <code class="highlighter-rouge">$enable-*</code> Sass变量切换全局CSS首选项。覆盖变量的值并根据需要<code class="highlighter-rouge">npm run test</code>重新编译。</p>
  <p>您可以在<code class="highlighter-rouge">_variables.scss</code> 文件中找到并自定义这些变量，用于关键全局选项。</p>
  <table>
    <thead>
      <tr>
        <th>Variable（变量）</th>
        <th>Values（值）</th>
        <th>Description（描述）</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code class="highlighter-rouge">$spacer</code></td>
        <td><code class="highlighter-rouge">1rem</code> (default), or any value &gt; 0</td>
        <td>以编程方式生成我们的 <a href="../utilities/spacing.html">间距系统</a>。</td>
      </tr>
      <tr>
        <td><code class="highlighter-rouge">$enable-rounded</code></td>
        <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
        <td>启用组件的 <code class="highlighter-rouge">border-radius</code> 样式。</td>
      </tr>
      <tr>
        <td><code class="highlighter-rouge">$enable-shadows</code></td>
        <td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
        <td>启用组件的 <code class="highlighter-rouge">box-shadow</code> 样式。</td>
      </tr>
      <tr>
        <td><code class="highlighter-rouge">$enable-gradients</code></td>
        <td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
        <td>通过 <code class="highlighter-rouge">background-image</code> 各种组件上的样式启用预定义的渐变。</td>
      </tr>
      <tr>
        <td><code class="highlighter-rouge">$enable-transitions</code></td>
        <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
        <td>启用组件的 <code class="highlighter-rouge">transition</code>定义.</td>
      </tr>
      <tr>
        <td><code class="highlighter-rouge">$enable-hover-media-query</code></td>
        <td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
        <td>…</td>
      </tr>
      <tr>
        <td><code class="highlighter-rouge">$enable-grid-classes</code></td>
        <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
        <td>使CSS类网格系统的产生 (如 <code class="highlighter-rouge">.container</code>, <code class="highlighter-rouge">.row</code>, <code class="highlighter-rouge">.col-md-1</code>, etc.).</td>
      </tr>
      <tr>
        <td><code class="highlighter-rouge">$enable-caret</code></td>
        <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
        <td>Enables pseudo element caret on <code class="highlighter-rouge">.dropdown-toggle</code>.</td>
      </tr>
      <tr>
        <td><code class="highlighter-rouge">$enable-print-styles</code></td>
        <td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
        <td>启用优化打印的样式。</td>
      </tr>
    </tbody>
  </table>
  <h2 id="color">颜色</h2>
  <p>Bootstrap的许多组件和实用程序都是通过Sass maps定义一系列颜色构建的。该maps可以在Sass中循环，以快速生成一系列规则。</p>
  <h3 id="all-colors">颜色盘</h3>
  <p>Bootstrap 4中提供的所有颜色可用作我们<code class="highlighter-rouge">scss/_variables.scss</code>文件中的Sass变量和Sass映射,还将在随后的次要版本中扩展，以增加额外的阴影，如同本文档中的<a href="#grays">灰度调色板</a>一样可选。</p>
  <div class="row">
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-blue">Blue 蓝</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-indigo">Indigo 靛青</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-purple">Purple 紫色</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-pink">Pink 粉红</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-red">Red 正红</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-orange">Orange 橙红</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-yellow">Yellow 黄</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-green">Green 绿</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-teal">Teal 鸭绿</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-cyan">Cyan 青</div>
    </div>
  </div>
  <p>以下是您可以在Sass中使用这些的方法：:</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="c1">// With variable </span><span class="nc">.alpha</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nv">$purple</span><span class="p">;</span> <span class="p">}</span>

<span class="c1">// From the Sass map with our `color()` function
</span><span class="nc">.beta</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nf">color</span><span class="p">(</span><span class="s2">"purple"</span><span class="p">);</span> <span class="p">}</span></code></pre>
  </figure>
  <p><a href="../utilities/colors.html">彩色实用程序类</a>也可用于设置<code class="highlighter-rouge">color</code>和<code class="highlighter-rouge">background-color</code>。</p>
  <div class="bd-callout bd-callout-info">
    <p>将来，我们的目标是为每种颜色的色调提供Sass地图和变量，就像下面的灰度色彩一样.</p>
  </div>
  <h3 id="theme-colors">主题颜色</h3>
  <p>我们使用所有颜色的子集来创建一个较小的调色板，用于生成配色方案，也可以作为Sass变量和<code class="highlighter-rouge">scss/_variables.scss</code>文件中的Sass映射。</p>
  <div class="row">
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-primary">Primary</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-secondary">Secondary</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-success">Success</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-danger">Danger</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-warning">Warning</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-info">Info</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-light">Light</div>
    </div>
    <div class="col-md-4">
      <div class="p-3 mb-3 swatch-dark">Dark</div>
    </div>
  </div>
  <h3 id="grays">灰度</h3>
  <p>系统提供一个广泛的灰色变量和一个Sass map 在<code class="highlighter-rouge">scss/_variables.scss</code>用于在整个项目中实现一致的灰色阴影。</p>
  <div class="row mb-3">
    <div class="col-md-4">
      <div class="p-3 swatch-100">100</div>
      <div class="p-3 swatch-200">200</div>
      <div class="p-3 swatch-300">300</div>
      <div class="p-3 swatch-400">400</div>
      <div class="p-3 swatch-500">500</div>
      <div class="p-3 swatch-600">600</div>
      <div class="p-3 swatch-700">700</div>
      <div class="p-3 swatch-800">800</div>
      <div class="p-3 swatch-900">900</div>
    </div>
  </div>
  <p>在 <code class="highlighter-rouge">_variables.scss</code>,里，你会发现我们的颜色变量和Sass mpas。以下是<code class="highlighter-rouge">$colors</code>的Sass map定义变量：</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="nv">$colors</span><span class="p">:</span> <span class="p">(</span>
  <span class="s2">"blue"</span><span class="o">:</span> <span class="nv">$blue</span><span class="o">,</span>
  <span class="s2">"indigo"</span><span class="o">:</span> <span class="nv">$indigo</span><span class="o">,</span>
  <span class="s2">"purple"</span><span class="o">:</span> <span class="nv">$purple</span><span class="o">,</span>
  <span class="s2">"pink"</span><span class="o">:</span> <span class="nv">$pink</span><span class="o">,</span>
  <span class="s2">"red"</span><span class="o">:</span> <span class="nv">$red</span><span class="o">,</span>
  <span class="s2">"orange"</span><span class="o">:</span> <span class="nv">$orange</span><span class="o">,</span>
  <span class="s2">"yellow"</span><span class="o">:</span> <span class="nv">$yellow</span><span class="o">,</span>
  <span class="s2">"green"</span><span class="o">:</span> <span class="nv">$green</span><span class="o">,</span>
  <span class="s2">"teal"</span><span class="o">:</span> <span class="nv">$teal</span><span class="o">,</span>
  <span class="s2">"cyan"</span><span class="o">:</span> <span class="nv">$cyan</span><span class="o">,</span>
  <span class="s2">"white"</span><span class="o">:</span> <span class="nv">$white</span><span class="o">,</span>
  <span class="s2">"gray"</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="o">,</span>
  <span class="s2">"gray-dark"</span><span class="o">:</span> <span class="nv">$gray-800</span>
<span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre>
  </figure>
  <p>开发者可以自由添加、删除或修改这个maps中的值，以更新其在许多其他组件中的使用方式（遗憾的是，目前并不支持<em>每个</em>组件都能过Sass map来定义，未来版本的更新将力求改进这一点，目前只能使用<code class="highlighter-rouge">${color}</code>变量和这个Sass map。</p>
  <h2 id="components">组件</h2>
  <p>Bootstrap大多组件和实用程序都使用<code class="highlighter-rouge">@each</code>遍历Sass map映射的循环构建。通过我们<code class="highlighter-rouge">$theme-colors</code>生成组件的变体和为每个断点创建响应变体特别有用。当自定义这些Sass map并重新编译时，您将自动看到您在这些循环中反映的更改。</p>
  <h3 id="modifiers">修饰符</h3>
  <p>Bootstrap的许多组件都使用基类修饰符类方法构建，这意味着大部分样式都包含在基础类（如<code class="highlighter-rouge">.btn</code>）中，而样式变量则限于修饰符类（如<code class="highlighter-rouge">.btn-danger</code>）,这些修饰符类是从<code class="highlighter-rouge">$theme-colors</code>map构建的，以便自定义修饰符类的数量和名称。</p>
  <p>以下是我们如何循环遍历<code class="highlighter-rouge">$theme-colors</code> map以生成<code class="highlighter-rouge">.alert</code>组件和所有<code class="highlighter-rouge">.bg-*</code>后台实用程序的修改器的两个示例:</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="c1">// Generate alert modifier classes </span><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
  <span class="nc">.alert-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
    <span class="k">@include</span> <span class="nd">alert-variant</span><span class="p">(</span><span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">-10</span><span class="p">)</span><span class="o">,</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">-9</span><span class="p">)</span><span class="o">,</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">6</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Generate `.bg-*` color utilities
</span><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">bg-variant</span><span class="p">(</span><span class="s1">'.bg-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span><span class="s1">'</span><span class="o">,</span> <span class="nv">$value</span><span class="p">);</span>
<span class="p">}</span></code></pre>
  </figure>
  <h3 id="responsive">响应</h3>
  <p>Sass循环不限于彩色图，可以用它生成组件或实用程序的响应变体。例如我们的响应文本对齐实用程序，我们将Sass映射的<code class="highlighter-rouge">@each</code>循环<code class="highlighter-rouge">$grid-breakpoints</code>与媒体查询包含在一起:</p>
  <figure class="highlight">
    <pre><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$breakpoint</span> <span class="n">in</span> <span class="nf">map-keys</span><span class="p">(</span><span class="nv">$grid-breakpoints</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="p">)</span> <span class="p">{</span>
    <span class="nv">$infix</span><span class="p">:</span> <span class="nf">breakpoint-infix</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="o">,</span> <span class="nv">$grid-breakpoints</span><span class="p">);</span>

    <span class="nc">.text</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-left</span>   <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
    <span class="nc">.text</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-right</span>  <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">right</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
    <span class="nc">.text</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-center</span> <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span></code></pre>
  </figure>
  <p>如果您需要修改<code class="highlighter-rouge">$grid-breakpoints</code>，您的更改将适用于遍历该地图的所有循环。</p>
  
  <h2 id="css-variables">CSS变量</h2>
  <p>Bootstrap 4 在其编译的CSS中包含大约二十个CSS<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">自定义属性（变量）</a>。在浏览器的Inspector，代码沙箱或一般原型设计中工作时，可以轻松访问常用的值，例如我们的主题颜色，断点和主要字体堆栈。</p>
  <h3 id="available-variables">可用变量</h3>
  <p>这里是我们包含的变量（注意<code cclass="highlighter-rouge">:root</code> 是必需的）。他们位于我们的<code cclass="highlighter-rouge">_root.scss</code>文件。</p>
  
  <figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nd">:root</span> <span class="p">{</span>
  <span class="py">--blue</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span>
  <span class="py">--indigo</span><span class="p">:</span> <span class="m">#6610f2</span><span class="p">;</span>
  <span class="py">--purple</span><span class="p">:</span> <span class="m">#6f42c1</span><span class="p">;</span>
  <span class="py">--pink</span><span class="p">:</span> <span class="m">#e83e8c</span><span class="p">;</span>
  <span class="py">--red</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span>
  <span class="py">--orange</span><span class="p">:</span> <span class="m">#fd7e14</span><span class="p">;</span>
  <span class="py">--yellow</span><span class="p">:</span> <span class="m">#ffc107</span><span class="p">;</span>
  <span class="py">--green</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span>
  <span class="py">--teal</span><span class="p">:</span> <span class="m">#20c997</span><span class="p">;</span>
  <span class="py">--cyan</span><span class="p">:</span> <span class="m">#17a2b8</span><span class="p">;</span>
  <span class="py">--white</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
  <span class="py">--gray</span><span class="p">:</span> <span class="m">#6c757d</span><span class="p">;</span>
  <span class="py">--gray-dark</span><span class="p">:</span> <span class="m">#343a40</span><span class="p">;</span>
  <span class="py">--primary</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span>
  <span class="py">--secondary</span><span class="p">:</span> <span class="m">#6c757d</span><span class="p">;</span>
  <span class="py">--success</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span>
  <span class="py">--info</span><span class="p">:</span> <span class="m">#17a2b8</span><span class="p">;</span>
  <span class="py">--warning</span><span class="p">:</span> <span class="m">#ffc107</span><span class="p">;</span>
  <span class="py">--danger</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span>
  <span class="py">--light</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
  <span class="py">--dark</span><span class="p">:</span> <span class="m">#343a40</span><span class="p">;</span>
  <span class="py">--breakpoint-xs</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="py">--breakpoint-sm</span><span class="p">:</span> <span class="m">576px</span><span class="p">;</span>
  <span class="py">--breakpoint-md</span><span class="p">:</span> <span class="m">768px</span><span class="p">;</span>
  <span class="py">--breakpoint-lg</span><span class="p">:</span> <span class="m">992px</span><span class="p">;</span>
  <span class="py">--breakpoint-xl</span><span class="p">:</span> <span class="m">1200px</span><span class="p">;</span>
  <span class="py">--font-family-sans-serif</span><span class="p">:</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s1">"Segoe UI"</span><span class="p">,</span> <span class="n">Roboto</span><span class="p">,</span> <span class="s1">"Helvetica Neue"</span><span class="p">,</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">,</span> <span class="s1">"Apple Color Emoji"</span><span class="p">,</span> <span class="s1">"Segoe UI Emoji"</span><span class="p">,</span> <span class="s1">"Segoe UI Symbol"</span><span class="p">;</span>
  <span class="py">--font-family-monospace</span><span class="p">:</span> <span class="n">SFMono-Regular</span><span class="p">,</span> <span class="n">Menlo</span><span class="p">,</span> <span class="n">Monaco</span><span class="p">,</span> <span class="n">Consolas</span><span class="p">,</span> <span class="s1">"Liberation Mono"</span><span class="p">,</span> <span class="s1">"Courier New"</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
<h3 id="examples">实例</h3>
<p>CSS变量为Sass的变量提供了类似的灵活性，但是在被提供给浏览器之前不需要编译。例如，在这里我们用CSS变量重置页面的字体和链接样式。</p>
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
  <span class="nl">font</span><span class="p">:</span> <span class="m">1rem</span><span class="p">/</span><span class="m">1.5</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-family-sans-serif</span><span class="p">);</span>
<span class="p">}</span>
<span class="nt">a</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--blue</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>

<h3 id="breakpoint-variables">断点变量</h3>

<p>虽然我们原本包含在我们的CSS变量断点（如<code>--breakpoint-md</code>），这些都没有在媒体查询的支持，但他们仍然可以使用内的媒体查询规则集。这些断点变量保留在已编译的CSS中，以便向后兼容，因为它们可以被JavaScript使用。<a href="https://www.w3.org/TR/css-variables-1/#using-variables">在规范中了解更多信息。</a></p>
<p>以下是不支持的示例：</p>
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--breakpoint-sm</span><span class="p">))</span> <span class="p">{</span>
  <span class="o">...</span>
<span class="p">}</span></code></pre></figure>
<p>这里是一个支持的例子：</p>
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="p">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span>
  <span class="nc">.custom-element</span> <span class="p">{</span>
    <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--primary</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span></code></pre></figure>
</main>
</div>
</div>

<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
	inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 

</body>
</html>